import React from "react";

//所有react都可以解构
// import React,{Component} from "react";
//APP是组件，封装了一块HTML内容

//声明组件 组件return的是一个标签，多于一个标签，就要套父元素，外部套div
//函数组件：16.8之前，页脚UI组件，木偶组件
const Header = (props) =>{
    // console.log(props);
    return <header>
        {[1,2,3,4,5]}
        这是标题{props.title}
    </header>
}
//循环渲染
const Content = (props) =>{
    console.log(props);
    return <ul>
        {
            props.data.map( item=><li>{item}</li>)
        }
        {
            // props.data.map( item=>{
            //     return<li>{item}</li>
            // })
        }
    </ul>
}

// const Footer = () =>{
//     return <footer>
//         这是页尾
//     </footer>
// }

//类组件
class Footer extends React.Component{
    constructor(){
        super();
        this.state = {
            time:new Date().toLocaleTimeString(),
            a:0,
            b:''
        }
        this.timer=setInterval(()=>{
            this.setState({time:new Date().toLocaleTimeString()})
        },1000)
    }
    //卸载（只执行一次）
    componentWillUnmount(){
        clearInterval(this.timer)
    }
    //挂载只执行一次，发请求在这里！！！立即执行也放在这里
    componentDidMount(){
        console.log('didmount')
    }
    //页面更新阶段 （更新就执行）
    shouldComponentUpdate(){
        console.log('shouldUpdate')
        return true;
    }
    componentDidUpdate(){
        console.log('didUpdata')
    }

    render(){
        //组件内进行数据绑定
        return <div>
            <h2>{this.state.time}</h2>
            <footer>这是页尾（类组件形式）{this.props.data}</footer>
        </div>
    }
}

class Demo extends React.Component{
    constructor(){
        super();
        this.state = {title:'事件绑定'};
        this.handleClick = this.handleClick.bind(this);

        // this.state = {}
    }
    handleClick(){
        console.log(this);
        this.setState({title:'new title'})
        console.log('click');
    }
    handleClick2 = ()=>{
        this.setState({title:'new title'})
    }
    render(){
        return <div>
            <button onClick={this.handleClick}>更新状态</button>
            <button onClick={this.handleClick2}>更新状态2</button>
            <h2>{this.state.title}</h2>
        </div>
    }
}

// function App() {        
//         return ( 
//         <div>
//             <Header title='React'/>
//             hello React
//             <Demo />
//             <div>
//                 <Header title='内容标题'/>
//                 content
//                 <Content data={['a','b','c']}/>
//             </div>
//             <Footer data='尾部内容'/>
//         </div>
//     );
// }

const App = () =>{
    return (<div>
        <Demo />
    </div>);
}



// function App() {
//     const txt = '数据绑定';
//     //const ele = <h1>babel编译</h1>
//     //两个ele一样，上面是语法糖，下面是真实原理
//     // const ele = React.createElement('h1',null,'babel编译')
//     // console.log(ele)
//     return ( 
//     <div className = "App" >
//          hello react{txt}
//     </div>


//     );
// }

export default App;